/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		
		<!-- 购物车 -->
		<view class="gouwuche">
			<text>购物车</text>
		</view>
		
		
		<!-- 已选的商品 -->
		<view class="commodity">
<!-- 			<view class="commodity-top">
				<text>当前已选3件</text>
			</view> -->
			<view class="commodity-bottom">
				<view class="commodity-bottom-list" v-for="item in gouwucheList" :key="item.id">
					<checkbox-group @click="handleCheckedChange(item.id)">
						<label>
							<checkbox :checked="item.isChecked" />
						</label>
					</checkbox-group>
					<image :src="item.main_thumb" mode="aspectFit"></image>
					<view class="commodity-info">
						<text class="commodity-info-top">{{item.name}}</text>
						<!-- <text class="commodity-info-center">产品颜色：黑色</text> -->
						<view class="commodity-info-bottom">
							<text>{{item.price}}</text>
							<view class="commodity-info-bottom-right">
								<text @click="addCount" data-count="-1" :data-id="item.id">-</text>
								<text>{{item.amount}}</text>
								<text @click="addCount" data-count="1" :data-id="item.id">+</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 结算 -->
		<view class="jiesuan">
			<checkbox-group @click="handleAllChecked">
				<label>
					<checkbox :checked="allChecked" /><text>全选</text>
				</label>
			</checkbox-group>
			<text>合计：<text>{{totalPrice}}</text></text>
			<text @click="confirm_order">结算</text>
		</view>
		
		
	</view>
</template>

<script>
	import {postDataDetail} from '@/request/shopping.js'
	import {lhx_showModal} from '@/utils/util.js'
	export default {
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				allChecked: true,
				gouwucheList: [],
				totalPrice: 0,
				newgwc: []
			}
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad() {
			this.newgwc = uni.getStorageSync('shop_trolley')
			this.newgwc.forEach((item) => {
				postDataDetail({id: item.id}).then(res => {
					res.data.data.amount = item.amount
					res.data.data.isChecked = item.isChecked
					this.gouwucheList.push(res.data.data)
				})
			})
			setTimeout(() => {
				this.setCart(this.gouwucheList)
			},1000)
		},
		onShow() {

		},
		onHide() {
		  console.log('保存了2')
		  uni.setStorageSync('shop_trolley', this.newgwc)
		},
		onUnload() {
		},
		methods: {
			confirm_order(){
				uni.navigateTo({
					url: `/pages/confirm-order-form/confirm-order-form?goodstype=mall&shopcarlist=1`
				});
			},
			// 点击全选
			handleAllChecked() {
				let allChecked = this.allChecked
				this.gouwucheList.forEach(item => {
					item.isChecked = !allChecked
				})
				this.allChecked = !allChecked
				this.setCart(this.gouwucheList)
			},
			// 点击单选
			handleCheckedChange(id) {
				let gouwuche = this.gouwucheList.find(item => item.id == id)
				gouwuche.isChecked = !gouwuche.isChecked
				this.setCart(this.gouwucheList)
			},
			// 点击加减
			addCount(e) {
				let { count, id } = e.currentTarget.dataset
				let newgouwuche = this.gouwucheList.find(item => item.id == id)
				if(newgouwuche.amount == 1 && count == -1) {
					lhx_showModal().then(res => {
						if(res.confirm) {
							this.gouwucheList = this.gouwucheList.filter(item => item.id != id)
						}
						this.setCart(this.gouwucheList)
					})
				} else {
					newgouwuche.amount = Number(newgouwuche.amount) + Number(count)
				}
				
				// ------------缓存中需要保存的数据   开始-------------
				let newgwc = this.newgwc.find(item => item.id == id)
				if(newgwc.amount == 1 && count == -1) {
					lhx_showModal().then(res => {
						if(res.confirm) {
							this.newgwc = this.newgwc.filter(item => item.id != id)
						}
						this.setCart(this.gouwucheList)
					})
				} else {
					newgwc.amount = Number(newgwc.amount) + Number(count)
				}
				// ------------缓存中需要保存的数据   结束-------------
				
				
				this.setCart(this.gouwucheList)
			},
			
			setCart(carts) {
				let totalPrice = 0
				let newAllChecked = true
				carts.forEach(item => {
					if(item.isChecked) {
						totalPrice += item.amount * item.price
					} else {
						newAllChecked = false
					}
				})
				this.totalPrice = totalPrice.toFixed(2)
				newAllChecked = carts.length > 0 ? newAllChecked : false
				this.allChecked = newAllChecked
			}
		}
	}
</script>

<style lang="less" scoped>

// 购物车
.gouwuche {
	height: 100upx;
	background-color: #4b89ff;
	text-align: center;
	line-height: 100upx;
	text {
		font-size: 32upx;
		font-weight: 700;
		color: #fff;
	}
}


// 商品列表
.commodity {
	background-color: #fff;
	&-top {
		height: 70upx;
		padding: 0 30upx;
		border-bottom: 4upx solid #f5f5f5;
		line-height: 70upx;
		text {
			font-size: 26upx;
			color: #333;
		}
	}
	&-bottom {
		padding: 0 30upx;
		&-list {
			height: 202upx;
			border-bottom: 4upx solid #f5f5f5;
			display: flex;
			align-items: center;
			image {
				width: 160upx;
				height: 160upx;
				margin: 0 30upx;
			}
			.commodity-info {
				width: 400upx;
				display: flex;
				flex-direction: column;
				&-top {
					font-size: 22upx;
					font-weight: 700;
					color: #333;
				}
				&-center {
					font-size: 22upx;
					color: #888;
					margin-top: 15upx;
				}
				&-bottom {
					margin-top: 25upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text {
						font-size: 24upx;
						font-weight: 700;
						color: #ff3824;
					}
					&-right {
						display: flex;
						align-items: center;
						text {
							width: 40upx;
							height: 40upx;
							background-color: #f5f5f5;
							text-align: center;
							line-height: 40upx;
							font-size: 20upx;
						}
						text:nth-child(2) {
							margin: 0 4upx;
						}
					}
				}
			}
		}
	}
}


// 结算
.jiesuan {
	width: 750upx;
	height: 100upx;
	background-color: #fff;
	border-top: 2upx solid #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	label {
		margin-left: 30upx;
		text {
			font-size: 28upx;
			font-weight: 700;
			color: #333;
			margin-left: 0 !important;
		}
	}
	text:nth-child(2) {
		font-size: 28upx;
		font-weight: 700;
		color: #333;
		margin-left: 60upx;
		text {
			color: #fb3d3d;
		}
	}
	text:nth-child(3) {
		width: 200upx;
		height: 100upx;
		background-color: #fb3d3d;
		color: #fff;
		font-size: 28upx;
		text-align: center;
		line-height: 100upx;
	}
}



</style>
